<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<title>分享二维码</title>
		<link rel="stylesheet" type="text/css" href="css/public.css" />
	</head>
	<style type="text/css">
		img {
			position: absolute;
		}
		
		body img {
			width: 7.5rem;
			display: block;
			height: auto;
			position: absolute;
			top: 0;
			left: 0;
		}
		
		#body-classArr {
			height: 12.05rem;
			width: 7.5rem;
		}	
		.QRcode-one {
			height: 2.8rem;
			width: 2.8rem;
			top: 7.32rem;
			left: 2.25rem;
		}
		
		.QRcode-two {
			height: 2.25rem;
			width: 2.2rem;
			top: 8.85rem;
			left: 4.8rem;
		}		
		.QRcode-three {
			height: 1.7rem;
			width: 1.7rem;
			top: 9.73rem;
			left: 0.435rem;
		}
		
		.QRcode-four {
			height: 1.75rem;
			width: 1.73rem;
			top: 10.05rem;
			left: 5.27rem;
		}
		
		.QRcode-five {
			height: 1.34rem;
			width: 1.48rem;
			top: 9.4rem;
			left: 3.1rem;
		}
		
		.QRcode-six {
			height: 1.63rem;
			width: 1.56rem;
			top: 9.73rem;
			left: 5.43rem;
		}
		
		.QRcode-seven {
			height: 0.8rem;
			width: 0.8rem;
			top: 9.78rem;
			left: 6.02rem;
		}
		
		.QRcode-eight {
			height: 0.9rem;
			width: 0.9rem;
			top: 0.95rem;
			left: 3.2rem;
		}
		
		.QRcode-nine {
			height: 1.08rem;
			width: 1.08rem;
			top: 6.02rem;
			left: 3.242rem;
		}
		
		
		.QRcode-ten {
			height: 1.6rem;
			width: 1.6rem;
			top:7.07rem;
			left: 5.49rem
		}
		
		.QRcode-eleven {
			height: 1.7rem;
			width: 1.7rem;
			top: 9.46rem;
			left: 1.18rem;
		}

		.QRcode-twelve {
			height: 1.26rem;
			width: 1.3rem;
			top: 8.3rem;
			left: 5.83rem;
		}
		
		.QRcode-thirteen {
			height: 2.7rem;
			width: 2.65rem;
			top: 8.05rem;
			left: 2.5rem;
		}
		
		.QRcode-fourteen {
			height: 2.54rem;
			width: 2.56rem;
			top: 6.74rem;
			left: 2.46rem;
		}
		
		.QRcode-fifteen {
			height: 2.05rem;
			width: 2.07rem;
			top: 4.04rem;
			left: 2.64rem;
		}
		.QRcode-sixteen {
			height: 2.2rem;
			width: 2.25rem;
			top: 9.45rem;
			left: 2.4rem;
		}
		.QRcode-seventeen {
			height: 1.7rem;
			width: 1.7rem;
			top: 9.765rem;
			left: 0.45rem;
		}
		.QRcode-eighteen {
			height: 2.1rem;
			width: 2.1rem;
			top: 7.85rem;
			left: 2.58rem;
		}
		.QRcode-nineteen {
			height: 1.7rem;
			width: 1.7rem;
			top:9.72rem;
			left: 0.58rem;
		}
		.QRcode-twenty {
			height: 2.8rem;
			width: 2.75rem;
			top:8.18rem;
			left: 2.25rem;
		}
		.Recomcode-twenty {
			position: absolute;
			color: #000;
			top:9.8rem;
			left: 2.2rem;
			font-size: 0.32rem;
		}
		.QRcode-twenty-one {
			height:2.6rem;
			width:2.6rem;
			top:5.66rem;
			left: 2.49rem;
		}
		.QRcode-twenty-two {
			height: 2.2rem;
			width: 2.2rem;
			top: 9.57rem;
			left: 2.55rem;
		}
		.logo21{
			position: absolute;
			left: 2.6rem;
			top: 8.18rem; 
			z-index: 999;
			width: auto;
			height: 1.02rem;
		}
		.logo16{
			position: absolute;
			left: 6.27rem;
			top: 10.55rem;
			z-index: 999;
			width: 0.45rem;
			height: 0.45rem;
			border-radius: 3px;
		}
	</style>

	<body>
		<div id="body-classArr">
			<img id="bg" style="display: block;height: 12.05rem;width: 7.5rem;" />
			<p id='code'></p>
			<p id='name'></p>
			<img src="img/logo.png"id="logo"/>
		</div>
	</body>
	<script src="//cdn1.lncld.net/static/js/3.2.1/av-min.js"></script>
	<script type="text/javascript" src="js/api.js"></script>
	<script type="text/javascript" src="js/zepto.js"></script>
	<script type="text/javascript" src="js/layer.js"></script>
	<script type="text/javascript" src="js/rem.js"></script>
	<script type="text/javascript" src="js/html2canvas.js"></script>
	<script type="text/javascript" src="js/qrcode.min.js"></script>
	<script type="text/javascript">
		var tempkey;
		//canvas转为img
		function convertCanvasToImage(canvas) {　　 //新Image对象，可以理解为DOM 
			var image = new Image();　　 // canvas.toDataURL 返回的是一串Base64编码的URL，当然,浏览器自己肯定支持 
			 // 指定格式 jpg 
			image.src = canvas.toDataURL("image/png");　　
			return image;
		}
		$(function() {
			var shareUrl = 'http://www.uniao.me/share/index.htm?reCode=' + localStorage.userId + '&topUserId=2000&from=singlemessage&isappinstalled=1';
			var qrcode = new QRCode("body-classArr", { //生成带参二维码
				text: shareUrl,
				width: 128,
				height: 128,
				colorDark: "#000000",
				colorLight: "#ffffff",
				correctLevel: QRCode.CorrectLevel.H
			});
			var userId = Util.GetQueryString('userId');
			localStorage.userId = userId;
			//查询该用户是否选择过模板
			var query = new AV.Query('shareTable');
			query.equalTo('userId', userId);
			query.find().then(function(res) {
				if(res == '') {
					tempkey = '17';
				} else {
					tempkey = Util.Parse(res)[0].userKey;
				}
				switch(tempkey) {
					case '1':
						$('#bg').attr('src', 'img/1.jpg');
						$('#bg').siblings('img').attr('class', 'QRcode-one');
						break;
					case '2':
						$('#bg').attr('src', 'img/2.jpg');
						$('#bg').siblings('img').attr('class', 'QRcode-two');
						break;
					case '3':
						$('#bg').attr('src', 'img/3.jpg');
						$('#bg').siblings('img').attr('class', 'QRcode-three');
						break;
					case '4':
						$('#bg').attr('src', 'img/4.jpg');
						$('#bg').siblings('img').attr('class', 'QRcode-four');
						break;
					case '5':
						$('#bg').attr('src', 'img/5.jpg');
						$('#bg').siblings('img').attr('class', 'QRcode-five');
						break;
					case '6':
						$('#bg').attr('src', 'img/6.jpg');
						$('#bg').siblings('img').attr('class', 'QRcode-six');
						break;
					case '7':
						$('#bg').attr('src', 'img/7.jpg');
						$('#bg').siblings('img').attr('class', 'QRcode-seven');
						break;
					case '8':
						$('#bg').attr('src', 'img/8.jpg');
						$('#bg').siblings('img').attr('class', 'QRcode-eight');
						break;
					case '9':
						$('#bg').attr('src', 'img/9.jpg');
						$('#bg').siblings('img').attr('class', 'QRcode-nine');
						break;
					case '10':
						$('#bg').attr('src', 'img/10.jpg');
						$('#bg').siblings('img').attr('class', 'QRcode-ten');
						break;
					case '11':
						$('#bg').attr('src', 'img/11.jpg');
						$('#bg').siblings('img').attr('class', 'QRcode-eleven');
						break;
					case '12':
						$('#bg').attr('src', 'img/12.jpg');
						$('#bg').siblings('img').attr('class', 'QRcode-twelve');
						break;
					case '13':
						$('#bg').attr('src', 'img/13.jpg');
						$('#bg').siblings('img').attr('class', 'QRcode-thirteen');
						break;
					case '14':
						$('#bg').attr('src', 'img/14.jpg');
						$('#bg').siblings('img').attr('class', 'QRcode-fourteen');
						break;
					case '15':
						$('#bg').attr('src', 'img/15.jpg');
						$('#bg').siblings('img').attr('class', 'QRcode-fifteen');
						$('#share14').attr('display','block');
						$('#logo').addClass('logo15');
						break;
					case '16':
						$('#bg').attr('src', 'img/16.jpg');
						$('#bg').siblings('img').attr('class', 'QRcode-sixteen');
						break;
					case '17':
						$('#bg').attr('src', 'img/17.jpg');
						$('#bg').siblings('img').attr('class', 'QRcode-seventeen');
						break;
					case '18':
						$('#bg').attr('src', 'img/18.jpg');
						$('#bg').siblings('img').attr('class', 'QRcode-eighteen');
						$('#logo').addClass('logo18');
						break;
					case '19':
						$('#bg').attr('src', 'img/19.jpg');
						$('#bg').siblings('img').attr('class', 'QRcode-nineteen');
						break;
					case '20':
						$('#bg').attr('src', 'img/20.jpg');
						$('#bg').siblings('img').attr('class', 'QRcode-twenty');
						break;
					case '21':
						$('#bg').attr('src', 'img/21.jpg');
						$('#bg').siblings('img').attr('class', 'QRcode-twenty-one');
						$('#logo').attr('src','./img/logo21.png').addClass('logo21');
						break;
					case '22':
						$('#bg').attr('src', 'img/22.jpg');
						$('#bg').siblings('img').attr('class', 'QRcode-twenty-two');
						break;
					default:
						$('#bg').attr('src', 'img/8.jpg');
						$('#bg').siblings('img').attr('class', 'QRcode-eight');
						break;
				}
				var w = $("#body-classArr").width();
				var h = $("#body-classArr").height();
				//要将 canvas 的宽高设置成容器宽高的 2 倍
				var canvas = document.createElement("canvas");
				canvas.width = w * 4;
				canvas.height = h * 4;
				canvas.style.width = w + "px";
				canvas.style.height = h + "px";
				var context = canvas.getContext("2d");
				//然后将画布缩放，将图像放大两倍画到画布上
				context.scale(4, 4);
				html2canvas(document.querySelector("#body-classArr"), {
					canvas: canvas,
					onrendered: function(canvas) {
						var img = convertCanvasToImage(canvas);
						$('body').html('');
						$('body').html(img);
					}
				})
			}, function(error) {});
		});
	</script>

</html>